<template>
    <div id="info">
        <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
        <h2>无限的链式</h2>
        <p>Simple example for illustrating the creation and chaining of tweens.</p>
    </div>
    <div id="target"
        style="position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background: #a0dde9;padding: 1em;">
        hello world!
    </div>
    <div class="description">
        tweenA.chain(tweenB); <br>
        tweenB.chain(tweenA);
    </div>
</template>
  
<script>
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
export default {
    name: 'tween',
    components: {},
    props: {
    },
    data() {
        return {
            position: null,
            target: null,
            tween: null,
            tweenBack: null,
        };
    },
    methods: {
        init() {
            this.position = { x: 100, y: 100, rotation: 0 }
            this.target = document.getElementById('target')
            this.tween = new TWEEN.Tween(this.position)
                .to({ x: 700, y: 200, rotation: 359 }, 2000)
                .delay(1000)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(this.update)

            this.tweenBack = new TWEEN.Tween(this.position)
                .to({ x: 100, y: 100, rotation: 0 }, 3000)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(this.update)

            this.tween.chain(this.tweenBack)
            this.tweenBack.chain(this.tween)

            this.tween.start()
            this.animate();
        },
        update() {
            this.target.style.left = this.position.x + 'px'
            this.target.style.top = this.position.y + 'px'
            this.target.style.webkitTransform = 'rotate(' + Math.floor(this.position.rotation) + 'deg)'
            this.target.style.MozTransform = 'rotate(' + Math.floor(this.position.rotation) + 'deg)'
        },
        animate(time) {
            var id = requestAnimationFrame(this.animate.bind(this))
            var result = TWEEN.update(time)
            if (!result) cancelAnimationFrame(id)
        }
    },
    mounted() {
        this.init()
    }
}
</script>
  
<style></style>
  